

const qs = (element) => document.querySelector(element)

// 接口地址：https://www.apifox.cn/apidoc/shared-36f0cbc0-9064-44bc-850a-805e263bf494/api-25827426
axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

async function init() {
    //省
    const { data: res } = await axios.get('/city/province')
    console.log(res.data);

    const sheng = res.data.map((item) => `
    <option value="${item.province}">${item.name}</option>
`).join('')
    qs('#province').innerHTML = `<option value="">请选择省份</option>` + sheng
    qs('#province').value = 34

    //市
    const { data: { data: city } } = await axios.get('/city/city', {
        params: {
            provinceCode: '34'
        },
    })
    // console.log(city);
    const shi = city.map((item) => `
    <option value="${item.city}">${item.name}</option>
`).join('')
    qs('#city').innerHTML = `<option value="">请选择城市</option>` + shi
    qs('#city').value = '01'

    //区
    const { data: { data: qu } } = await axios.get('/city/area', {
        params: {
            provinceCode: '34',
            cityCode: '01'
        },
    })
    // console.log(qu);
    const quyu = qu.map((item) => `
    <option value="${item.area}">${item.name}</option>
`).join('')
    qs('#county').innerHTML = `<option value="">请选择区县</option>` + quyu
    qs('#county').value = '02'
}
init()


//给省注册改变事件
qs('#province').addEventListener('change', async function () {
    const { data: { data: city } } = await axios.get('/city/city', {
        params: {
            provinceCode: this.value
        },
    })
    // console.log(city);
    const shi = city.map((item) => `
    <option value="${item}">${item}</option>
`).join('')
    qs('#city').innerHTML = `<option value="">请选择城市</option>` + shi
    qs('#county').innerHTML = `<option value="">请选择区县</option>`
})


//给市给侧改变事件
qs('#city').addEventListener('change', async function () {
    const { data: { data: qu } } = await axios.get('/city/area', {
        params: {
            provinceCode: qs('#province').value,
            cityCode: this.value,//城市编码
        },
    })
    const quyu = qu.map((item) => `
    <option value="${item.area}">${item.name}</option>
`).join('')
    qs('#county').innerHTML = `<option value="">请选择区县</option>` + quyu
})